<template>
    <div>
        <div>表单控件绑定</div>
        <div>----------------------------------------------------------</div>

        <!-- v-model 数据双向绑定  -->
        <input type="text" v-model="message">
        <p>Message is:{{ message }}</p>
        <div>----------------------------------------------------------</div>

        <!-- v-model 多个勾选框 checkedNames对应value的值 -->
        <input type="checkbox" value="Jack" v-model="checkedNames">
        <input type="checkbox" value="A" v-model="checkedNames">
        <input type="checkbox" value="B" v-model="checkedNames">
        <br>
        <span>checked names: {{ checkedNames }}</span>
        <div>----------------------------------------------------------</div>

        <!-- v-model 选择列表 -->
        <div>
            <select v-model="selected">
                <option value="" disabled>请选择</option>
                <option>A</option>
                <option>B</option>
                <option>C</option>
                <option>D</option>
            </select>
            <span>Selected: {{ selected }}</span>
        </div>


    </div>
</template>
<script>
export default {
    data(){
        return{
            message: "hello",
            checkedNames: [],
            selected:''
        }
    }
}
</script>